<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>注册账号</title>

    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <script th:src="@{/assets/js/jquery.min.js}"></script>

    <link rel="stylesheet" th:href="@{/back/css/bootstrap.min.css}" />
<!--    <link rel="stylesheet" th:href="@{/assets/css/app.css}"/>-->

    <script>
        var flag1=false;
        function cheek_username(){


            if($("#username").val().length<=20 && $("#username").val().length>=3){
                var x= $.get("regis/register_username",{"username":$("#username").val()},flag1 = function (ev){
                    if(ev){
                        $("#username").css("border","");
                        $("#error_username").html("");
                        $("#sub").prop("disabled",false);
                        return true;


                    }else{
                        $("#username").css("border","1px solid red");
                        $("#error_username").html("用户名已存在");
                        $("#sub").prop("disabled",true);
                        return false;
                    }
                },"json");
                //alert(flag);


            }else{
                $("#username").css("border","1px solid red");
                $("#error_username").html("用户名长度在3-20字符");

                flag1=false;
            }
        };
        function cheek_password(){
            var check=/^\w{8,20}$/;

            if(check.test($("#password").val())){
                $("#password").css("border","");
                $("#error_password").html("");
                return true;
            }else{
                $("#password").css("border","1px solid red");
                $("#error_password").html("输入密码长度8-30的数字或英文字母");
                return false;
            }
        };
        function cheek_password1(){
            //alert(this.value);
            if($("#password1").val()==$("#password").val()){
                $("#password1").css("border","");
                $("#error_password1").html("");
                return true;
            }else{
                $("#password1").css("border","1px solid red");
                $("#error_password1").html("输入的密码不一致");
                return false;
            }
        };
        var flag2=false;
        function cheek_email(){

            if($("#email").val()==null||$("#email").val().length<=0){
                flag2=false;
                $("#email").css("border","1px solid red");
                $("#error_email").html("邮箱不能为空");
                return ;
            }
            $.get("/regis/register_email",{"email":$("#email").val()},flag2 = function (ev){
                if(ev){
                    $("#email").css("border","");
                    $("#error_email").html("");
                    $("#sub").prop("disabled",false);
                    return true;
                }else{
                    var s = '/regis/againRegis?email='+$("#email").val();
                    $("#email").css("border","1px solid red");
                    $("#error_email").html("该邮箱已被注册，<a href='/login'> 点击登录</a>，<a href='"+s+"'>点击激活</a>");
                    $("#sub").prop("disabled",true);
                    return false;
                }

            },"json");




        };
        var flag3=false;
        function cheek_chode(){
            //alert($("#code").val());
            if($("#code").val()!=undefined && $("#code").val()!=null && $("#code").val().length>0){
                //alert(true);
                flag3=true;
                return true;

            }else{
                //alert(false);
                $("#code").css("border","1px solid red");
                $("#code")[0].placeholder="验证码不能为空";
                flag3=false;
                return false;
            }
        };

        function change_image_chode(){
            var d = new Date();
            $("#image_code")[0].src="/regis/get_image_code?time="+d.getTime();
        };

        $(function (){

            $("#username").blur(cheek_username);
            $("#password").blur(cheek_password);
            $("#password1").blur(cheek_password1);
            $("#email").blur(cheek_email);
            //$("#code").blur(cheek_chode);
            $("#image_code").click(function (){
                change_image_chode();
            });
            $("#form1").submit(function (){


                $("#sub").prop("disabled","disabled");
                //alert(cheek_username());
                if(flag1 && cheek_password() && cheek_password1() && flag2){


                    $.get("/regis/register",$(this).serialize(),function (ev){
                            alert(ev);

                    },"text");
                }else if(!flag1){
                    cheek_username();change_image_chode();
                }else if(!flag2){
                    cheek_email();change_image_chode();
                }
                alert("提交成功,请查收邮箱");
                //alert("end");
                //location.href="/login";
                $("#sub").removeProp("disabled");
                return false;

            });
        });
    </script>

    <style>
        .reg {
            /*width:100%;*/
            /*height:100%;*/
            background:url(/assets/img/reg-back.jpg) ;
            /*background-size:100% 100%;*/
            /*color:#fafbfc;*/
        }
    </style>
</head>
<body class="reg">

<form class="form-horizontal" id="form1" style="margin-top: 200px;border-top: 200px;">
    <div class="form-group">
        <label for="username" class="col-sm-2 control-label">username</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="username" name="username" placeholder="username">
        </div>
        <div class="col-sm-2" id="error_username" style="margin-top: 5px;color:red;">

        </div>
    </div>
    <div class="form-group">
        <label for="Password" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-4">
            <input type="password" class="form-control" id="password" name="password" placeholder="Password">
        </div>
        <div class="col-sm-2" id="error_password" style="margin-top: 5px;color:red;">

        </div>
    </div>
    <div class="form-group">
        <label for="Password1" class="col-sm-2 control-label">确认密码</label>
        <div class="col-sm-4">
            <input type="password" class="form-control" id="password1" placeholder=" Again Password">
        </div>
        <div class="col-sm-2" id="error_password1" style="margin-top: 5px;color:red;">

        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">邮箱</label>
        <div class="col-sm-4">
            <input type="email" class="form-control" id="email" name="email" placeholder="email">
        </div>
        <div class="col-sm-4" id="error_email" style="margin-top: 5px;color:red;">

        </div>
    </div>
    <div class="form-group">
        <label for="code" class="col-sm-2 control-label">验证码</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" id="code" name="code">
        </div>
        <div class="col-sm-2">
            <a href="javascript:void(0);"><img src="/regis/get_image_code" id="image_code"/> </a>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" id="sub" class="btn btn-default">submit</button>
        </div>
    </div>
</form>

</body>
</html>